import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
import _extends from 'babel-runtime/helpers/extends';
import './index.less';

import 'ant-design-vue/es/drawer/style';
import Drawer from 'ant-design-vue/es/drawer';
import SiderMenu, { SiderMenuProps } from './SiderMenu';

var SiderMenuWrapper = {
  name: 'SiderMenuWrapper',
  model: {
    prop: 'collapsed',
    event: 'collapse'
  },
  props: SiderMenuProps,
  render: function render(h) {
    var _this = this;

    var layout = this.layout,
        isMobile = this.isMobile,
        collapsed = this.collapsed;

    var isTopMenu = layout === 'topmenu';
    var handleCollapse = function handleCollapse(e) {
      _this.$emit('collapse', true);
    };
    return isMobile ? h(
      Drawer,
      {
        'class': 'ant-pro-sider-menu',
        attrs: { visible: !collapsed,
          placement: 'left',
          maskClosable: true,
          getContainer: null,

          bodyStyle: {
            padding: 0,
            height: '100vh'
          }
        },
        on: {
          'close': handleCollapse
        }
      },
      [h(SiderMenu, { props: _extends({}, this.$props, { collapsed: isMobile ? false : collapsed }) })]
    ) : !isTopMenu && h(SiderMenu, _mergeJSXProps([{ 'class': 'ant-pro-sider-menu' }, { props: this.$props }]));
  }
};

SiderMenuWrapper.install = function (Vue) {
  Vue.component(SiderMenuWrapper.name, SiderMenuWrapper);
};

export { SiderMenu, SiderMenuProps };

export default SiderMenuWrapper;